<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>MyVue</title>
		<script src="./js/myVue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{person.name}}--{{person.age}}</h2>
			<div>
				<span>{{person.fav}}</span>
				<span v-text="msg"></span>
				<span v-text="person.fav"></span>
			</div>
			<input type="text" v-model="msg" />{{msg}}
			<div v-html="htmlStr"></div>
			<button v-on:click="handle">click me</button>
			<button @click="handle">click me@</button><br/>
			<input type="text" v-bind:value="msg" />
			<input type="text" :value="msg" />
			<div>{{about}}</div>

		</div>
		<script type="text/javascript">
			let vm = new MyVue({
				el: '#app',
				data: {
					person: {
						name: '张三',
						age: 20,
						fav: 'sing'
					},
					msg: '学习学习学习',
					htmlStr: '<a href="https://www.baidu.com">百度</a>',
					about: `采用数据劫持配合发布者-订阅者模式，
					通过Object.defineproperty()劫持各个属性getter和setter，
					数据变动时,发布消息给以来收集器Dep，然后通知观察者，做出对应的回调，更新视图
					
					MyVue作为入口，整合Observer，Compile，Watcher，通过Observer来监听数据变化
					通过Compile来编译模板，利用Watcher来连接Compile和Observer，来实现双向绑定`
				},
				methods: {
					handle() {
						console.log(this);
						this.person.name = '李四'
					}
				}
			});
		</script>
		<script type="text/javascript">
			let arr = [1,2,3,4,5,6,7,8,9];
			
			function between(a, b) {
				// console.log(1);
				return function(v) {
					// console.log(v);
					return v >= a && v <= b;
				}
			}
			
			console.log(arr.filter(between(2, 5)));
		</script>
	</body>
</html>
